<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        body {
            display: flex;
            height: 100vh;
            background: #f5f5f5;
        }

        .sidebar {
            width: 260px;
            background: white;
            padding: 20px;
            border-right: 1px solid #e5e7eb;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
            font-weight: 500;
        }

        .logo img {
            width: 24px;
            height: 24px;
            border-radius: 50%;
        }

        .new-chat {
            padding: 8px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background: #f9fafb;
            color: #374151;
            text-align: center;
            cursor: pointer;
        }

        .new-chat::before {
            content: "+";
            margin-right: 4px;
        }

        .chat-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .chat-item {
            padding: 8px;
            border-radius: 8px;
            background: #f3f4f6;
            color: #374151;
        }

        .main-content {
            flex: 1;
            padding: 40px;
            display: flex;
            flex-direction: column;
        }

        .chat-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 24px;
        }

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #4f46e5;
        }

        .header-text h1 {
            font-size: 18px;
            margin-bottom: 4px;
        }

        .header-text p {
            color: #6b7280;
            font-size: 14px;
        }

        .capabilities {
            margin-top: 24px;
        }

        .capabilities h2 {
            color: #374151;
            font-size: 16px;
            margin-bottom: 16px;
        }

        .capability-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }

        .capability-item {
            padding: 16px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            cursor: pointer;
        }

        .right-sidebar {
            width: 300px;
            background: white;
            padding: 20px;
            border-left: 1px solid #e5e7eb;
        }

        .deep-thinking {
            padding: 16px;
            background: #f9fafb;
            border-radius: 8px;
        }

        .deep-thinking h3 {
            font-size: 16px;
            margin-bottom: 12px;
            color: #374151;
        }

        .suggestion-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .suggestion-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #6b7280;
            font-size: 14px;
        }

        .input-area {
            position: fixed;
            bottom: 0;
            left: 260px;
            right: 300px;
            padding: 20px;
            background: white;
            border-top: 1px solid #e5e7eb;
            display: flex;
            gap: 12px;
        }

        .model-select {
            padding: 8px 12px;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            background: white;
        }

        .input-box {
            flex: 1;
            padding: 12px;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            resize: none;
            height: 48px;
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <div class="logo">
            <img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-YHYeeovZctZe1NpcUoIGUK1IgCJTXE.png" alt="AIMIX Logo">
            <span>AIMIX智剪</span>
        </div>
        <div class="new-chat">新对话</div>
        <div class="chat-list">
            <div class="chat-item">对话1</div>
            <div class="chat-item">对话2</div>
        </div>
    </div>

    <div class="main-content">
        <div class="chat-header">
            <div class="avatar"></div>
            <div class="header-text">
                <h1>你好,这里是AIMIX智剪人工智能助手</h1>
                <p>帮助你完成自媒体内容创作，获取超额收益～</p>
            </div>
        </div>

        <div class="capabilities">
            <h2>我可以帮助你做什么？</h2>
            <div class="capability-list">
                <div class="capability-item">写个故事</div>
                <div class="capability-item">讲个笑话</div>
                <div class="capability-item">生成一篇小红书笔记</div>
            </div>
        </div>
    </div>

    <div class="right-sidebar">
        <div class="deep-thinking">
            <h3>深度思考</h3>
            <div class="suggestion-list">
                <div class="suggestion-item">写个适合3岁小朋友的睡前故事</div>
                <div class="suggestion-item">帮我规划5月去新疆的10天旅行安排</div>
                <div class="suggestion-item">杭州美食有什么推荐</div>
            </div>
        </div>
    </div>

    <div class="input-area">
        <select class="model-select">
            <option>Doubao-pro-32k</option>
        </select>
        <textarea class="input-box" placeholder="输入内容..."></textarea>
    </div>
</body>
</html> 